<template>
    <el-form
            ref="filterForm"
            :inline="true"
            @keyup.enter.native="searchSubmit"
            :model="filterForm" label-width="80px">

        <el-form-item prop="viewName">
            <el-input v-model.trim="filterForm.viewName" placeholder="模块名称" style="width: 140px"
                      class="handle-input "></el-input>
        </el-form-item>

<!--        <el-form-item   prop="type" :label-width="formLabelWidth">-->
<!--            <xy-view-widget-type-select style="width: 140px" :multiple="true" :collapseTags="true" v-model.trim="filterForm.type"></xy-view-widget-type-select>-->
<!--        </el-form-item>-->

<!--        <el-form-item  prop="scene" :label-width="formLabelWidth">-->
<!--            <xy-view-widget-scene-select style="width: 140px" :collapseTags="true" v-model.trim="filterForm.scene"></xy-view-widget-scene-select>-->
<!--        </el-form-item>-->

        <el-form-item  prop="roles">
            <el-select v-model="filterForm.roles"
                       :multiple="true"
                       :collapseTags="true"
                       style="width: 140px"
                       placeholder="所属角色">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>

        <el-form-item prop="enabled">
            <el-select v-model="filterForm.enabled"
                       style="width: 140px"
                       placeholder="是否可用">
                <el-option
                        v-for="item in optionsEnabled"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="searchSubmit" icon="search">搜索</el-button>
            <el-button @click="resetForm">重置</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    import xyRoleViewSelect from './../role_view/RoleViewSelect.vue'
    // import xyViewWidgetTypeSelect from './ViewWidgetTypeSelect.vue';
    // import xyViewWidgetSceneSelect from './ViewWidgetSceneSelect.vue';

    export default {
        mounted() {
            //组件初始化调用
        },
        components: {
            // xyViewWidgetTypeSelect,
            // xyViewWidgetSceneSelect,
            xyRoleViewSelect
            //引用组件
        },
        props: {
            viewWidgets:undefined,
            //组件参数
        },
        data() {
            return {
                options: this.$store.state.role,
                optionsEnabled: [{label: '可用', value: '1'}, {label: '禁用', value: '0'}],
                filterForm: {
                    viewName: undefined,
                    type: undefined,
                    scene: this.viewWidgets,
                    roles: undefined,
                    enabled: undefined
                }
            }
        },
        computed: {
            //计算属性
        },
        methods: {
            /**
             * 查询
             */
            searchSubmit: function () {
                this.$emit('searchSubmit', this.filterForm);
            },
            /**
             * 重置
             */
            resetForm: function () {
                this.$refs.filterForm.resetFields();
                this.searchSubmit();
            }
        },
        watch: {
            // data / props 属性观察
        },
        filters: {},
        beforeDestroy() {
            //组件销毁之前调用
        }
    }
</script>

<style scoped>

</style>
